<template>
	<view class="bg-light pb-2" style="height: 100%">
		<!-- 轮播主图 -->
		<view style="position: relative" class="mb-3">
			<swiper id="swiper" :autoplay="true" :interval="3000" :duration="500" circular
				:style="{ height: swiperWidth + 'px' }" @change="changeIndicatorDots">
				<swiper-item v-if="item.isShow" v-for="(item, index) in GoodsDetail.Swiper" :key="index">
					<image :src="Domain_IMG + item.Picture_Url" mode="sapectFill"
						:style="{ height: swiperWidth + 'px', width: '100%' }"></image>
				</swiper-item>
			</swiper>
			<text class="rounded-circle font-sm px-2 text-white current">{{current}}</text>
		</view>
		<!-- 商品详情 -->
		<view class="pt-2 pb-1 title m-auto rounded-lg flex flex-column mt-4">
			<text class="txt ml-3 h3">{{ GoodsDetail.Goods.Article_Name }}</text>
			<text class="txt ml-3 font text-ellipsis">{{GoodsDetail.Goods.Category_Name}}</text>
			<text class="txt ml-3 mt-2 font-sm text-ellipsis text-info">已售:{{ GoodsDetail.Goods.Unit_Quantity }} 仅剩:{{GoodsDetail.Goods.Remain_Quantity}}</text>
			<text class="price font-lg text-ellipsis">￥{{ GoodsDetail.Paystages["Min_0"].Unit_Price }}</text>
		</view>
		<!-- 商品规格 -->
		<view class="mx-4 mt-1 px-2 py-2 bg-white rounded" style="position: relative">
			<!-- 产品规格 -->
			<view>
				<text class="font font-weight-bold">产品规格</text>
				<view class="flex flex-wrap">
					<view class="specifications2 rounded font-sm mr-2 mt-2 py-1 px-2">{{GoodsDetail.Goods.Specifications_Name}}</view>
				</view>
			</view>
			<!--起步购买数量  -->
			<view>
				<text class="font font-weight-bold">最低购买量：</text><text class="font">{{GoodsDetail.Goods.Starting_Quantity}}</text>
			</view>
			<!--每次购买量  -->
			<view>
				<text class="font font-weight-bold">每次购买量：</text><text class="font">{{GoodsDetail.Goods.Unit_Quantity}}</text>
			</view>
		</view>
		<!-- 付款周期 -->
		<view class="mt-2 pt-2 pb-4 m-auto w-90 bg-white rounded-lg" v-if="GoodsDetail.Paystages">
			<text class="h3 font-weight-bold font ml-3">付款周期(预览)</text>
			<view class="font rounded zq m-auto w-90 bg-white">
				<view class="font px-2 py-1 mr-2" v-for="(item, key ,index) in GoodsDetail.Paystages" :key="key"
					style="border-radius: 10rpx" @click="toggleStyle(key)" :class="isActive==key?'bg-info text-white':'bg-light'">
					<text class="font">查看方案{{ ChinesNum(index+1) }}</text>
				</view>
			</view>
			<!-- 展示细则 -->
			<view class="mt-2 m-auto w-90 bg-white table font bg-light">
				<text v-if="GoodsDetail.Paystages[isActive].Full_Payment" class="font-md font-weight-bold">全款细则</text>
				<view v-if="GoodsDetail.Paystages[isActive].Full_Payment" class="th border-bottom border-muted">
					<view class="font font-weight-bold">付款类型</view>
					<view class="font font-weight-bold">折扣</view>
					<view class="font font-weight-bold">优惠单价</view>
				</view>
				<view v-if="GoodsDetail.Paystages[isActive].Full_Payment" class="td">
					<view class="font">{{GoodsDetail.Paystages[isActive].Full_Payment.Trading_Explain}}</view>
					<view class="font">{{GoodsDetail.Paystages[isActive].Full_Payment.Trading_Percentage}}%</view>
					<view class="font">{{(GoodsDetail.Paystages[isActive].Unit_Price *GoodsDetail.Paystages[isActive].Full_Payment.Trading_Percentage) /100}}元</view>
				</view>
				<view class="mt-2"></view>
				<text v-if="GoodsDetail.Paystages[isActive].Payment_Days.length>0" class="font-md font-weight-bold">步骤付款细则</text>
				<view v-if="GoodsDetail.Paystages[isActive].Payment_Days.length>0">
					<view class="th border-bottom border-muted">
						<view class="font font-weight-bold">付款阶段</view>
						<view class="font font-weight-bold">额度</view>
						<view class="font font-weight-bold">金额计算</view>
					</view>
					<view class="td" v-for="(item, index) in GoodsDetail.Paystages[isActive].Payment_Days" :key="index">
						<view class="font">{{ item.Trading_Explain }}</view>
						<view class="font">{{ item.Trading_Percentage }}%</view>
						<view class="font">{{ (item.Unit_Price * item.Trading_Percentage) / 100 }}元</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品详情图 -->
		<view class="mt-2 pt-2 pb-4 m-auto w-90 bg-white rounded-lg">
			<text class="h3 font-weight-bold ml-3">商品详情</text>
			<view id="DetailMap" class="flex flex-wrap justify-center m-auto mb-10" style="width: 90%">
				<image v-if="item.isShow" style="width: 100%" :src="Domain_IMG + item.Picture_Url" mode="widthFix"
					v-for="(item, index) in GoodsDetail.Detail" :key="index"></image>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="fixed-bottom py-1" style="background-color: #fff">
			<view class="m-auto flex align-center justify-between" style="width: 90%">
				<view @click="handleBtn('index')" class="flex flex-column justify-center align-center">
					<image :src="Domain_ICON + '/index.png'" style="width: 35rpx; height: 35rpx" mode=""></image>
					<text class="font-sm text-muted">首页</text>
				</view>
				<view @click="handleBtn('serve')" class="flex flex-column justify-center align-center">
					<image :src="Domain_ICON + '/serve.png'" style="width: 35rpx; height: 35rpx" mode=""></image>
					<text class="font-sm text-muted">客服</text>
				</view>
				<view @touchmove.stop.prevent="moveHandle" @click="handleBuy('buy')"
					class="text-white bg-info py-3 text-center rounded-lg" style="width: 75%">
					<text class="font">立即购买</text>
				</view>
			</view>
		</view>
		<!-- 右侧悬浮按钮 -->
		<view class="button flex flex-column-reverse">
			<view class="shadow mt-2 bg-white rounded-circle flex justify-center align-center"
				style="width: 100rpx; height: 100rpx; position: relative" @click="handleBtn(item.title)"
				v-if="item.isShow" v-for="(item, index) in btn" :key="index">
				<i v-if="item.title == 'car' && total > 0" class="bg-danger rounded-circle text-white px-1 font-sm"
					style="position: absolute; top: -5rpx; left: -5rpx">{{ total }}</i>
				<image :src="Domain_ICON + item.icon" style="width: 50rpx; height: 50rpx" mode=""></image>
				<button id="shareBtn" class="rounded-circle" open-type="share" v-if="item.title == 'share'">
					分享
				</button>
			</view>
		</view>
		<!-- 遮罩层和弹窗 -->
		<view v-if="showMask" class="mask" style="background-color: rgba(0, 0, 0, 0.5)">
			<view class="fixed-bottom bg-light rounded-lg" style="height: 75%">
				<view style="position: relative; height: 120rpx">
					<image :src="Domain_IMG + GoodsDetail.Goods.Picture_URL"
						class="rounded-lg front-cover border border-white" style="border-width: 5rpx" mode=""></image>
					<text class="font-md font-weight-bold"
						style="position: absolute; left: 240rpx; top: 80rpx">￥{{ Price(Sales_Amount()) }}</text>
					<text @click="handleBuy()" class="h2 text-info"
						style="position: absolute; right: 40rpx; top: 20rpx">×</text>
				</view>
				<!-- 产品规格 -->
				<view class="mx-4 mt-1 px-2 py-2 bg-white rounded" style="position: relative">
					<text class="font font-weight-bold">产品规格</text>
					<view class="flex flex-wrap">
						<view style="white-space: nowrap; background-color: #aaffff; color: #000;" class="specifications2 rounded font-sm mr-2 mt-2 py-1 px-2">{{ GoodsDetail.Goods.Specifications_Name }}</view>
					</view>
				</view>
				<view class="mx-4 mt-4 px-2 py-3 bg-white rounded" style="position: relative">
					<text class="font font-weight-bold">数量</text>
					<view class="flex" style="float: right">
						<view @click="subGoods(GoodsDetail.Goods.Unit_Quantity)" hover-class="bg-hover-light"
							:hover-stay-time="150" class="mx-1 text-center rounded-left bg-light" style="width: 50rpx">-
						</view>
						<view class="font-sm flex align-center justify-center bg-light" style="width: 60rpx">
							{{ quantity }}
						</view>
						<view @click="addGoods(GoodsDetail.Goods.Unit_Quantity)" hover-class="bg-hover-light"
							:hover-stay-time="150" class="mx-1 text-center rounded-right bg-light" style="width: 50rpx">
							+</view>
					</view>
				</view>
				<view v-if="mask == 'buy'" @click="handleSkip()"
					class="fixed-bottom rounded font bg-info mx-4 my-2 py-2 text-white text-center">立即购买</view>
				<view v-if="mask == 'car'" @click="addShopCar()"
					class="fixed-bottom rounded font bg-info mx-4 my-2 py-2 text-white text-center">加入购物车</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import { WXAddAction } from "@/api/global.js";
	import { WXShopCarQuantity } from "@/api/WeChat.js";
	import { NowTime } from "@/static/js/DateUtil.js";
	import { accMul,toChinesNum } from "@/static/js/GeneralUtil.js";
	export default {
		data() {
			return {
				ShareOpenID: "",
				OpenID: "",
				Enterprise_Info_SerialNumber: "",
				App_ID: "",
				Domain_IMG: app.globalData.Domain_IMG, //全局变量--域名
				Article_SerialNumber: "", //商品主键
				Wholesale_Unit_Price_SerialNumber: "", //库存主键
				Store_SerialNumber: "", //门店主键
				swiperWidth: 0, //自适应轮播组件长度
				current: "", //轮播图数
				showMask: false, //弹窗
				mask: "buy", //判断?购物车 or 购买
				quantity: 1, //数量
				GoodsDetail: {}, //商品详情
				hide: false, //控制商品说明是否展示
				shows: true,
				select: 0,
				total: 0,
				// times: '',
				loading: false,
				specifications: [{
					Sales_Unit_Price: "",
					Sales_Unit_Price_Stock_SerialNumber: "",
					Specifications_Name: "",
					Stock_Remain: "",
					Stock_Sell: "",
				}, ],
				Goods: [],
				Address: null, //默认地址
				btn: [{
						//右侧悬浮按钮
						title: "top",
						icon: "/top.png",
						isShow: false,
					},
					{
						title: "serve",
						icon: "/serve.png",
						isShow: true,
					},
					{
						title: "car",
						icon: "/shop_car.png",
						isShow: true,
					},
					{
						title: "share",
						icon: "/share.png",
						isShow: true,
					},
				],
				isActive: "Min_0",
				isActive1:'Min_0',
				Starting_Quantity: 1,
				Domain_ICON: app.globalData.Domain_ICON, //全局变量域名
			};
		},
		onLoad(options) {
			this.quantity = Number(options.Starting_Quantity);
			this.Starting_Quantity = Number(options.Starting_Quantity);
			this.fixed();
			uni.showLoading({
				title: "加载中...",
			});
			this.Article_SerialNumber = options.Article_SerialNumber;
			this.Wholesale_Unit_Price_SerialNumber = options.Wholesale_Unit_Price_SerialNumber;
			uni.request({
				//商品详情信息
				header: {
					"Content-Type": "application/x-www-form-urlencoded",
				},
				url: app.globalData.Domain_Name + "/WXWholesalePriceGoodsDetail", //销售价格单
				method: "POST",
				data: {
					Article_SerialNumber: options.Article_SerialNumber,
					Wholesale_Unit_Price_SerialNumber: options.Wholesale_Unit_Price_SerialNumber,
				},
				success: (res) => {
					this.GoodsDetail = res.data.Data;
					console.log(this.GoodsDetail);
					res.data.Data.Swiper.forEach((item, i) => {
						this.CheckImg(item, i);
					});
					res.data.Data.Detail.forEach((item, i) => {
						this.CheckImg1(item, i);
					});
					this.specifications = res.data.specifications;
					this.carouselChart(); //轮播图属性函数
				},
				complete() {
					uni.hideLoading();
				},
			});
		},
		onPageScroll(e) {
			//监听页面滚动，滚动1000以上时显示"回到顶部"按钮
			if (e.scrollTop >= 1000) {
				this.btn[0].isShow = true;
			} else {
				this.btn[0].isShow = false;
			}
		},
		computed: {
			ChinesNum(){
				return function(num){
					return toChinesNum(num)
				}
			},
			Price() {
				//补零
				return function(price) {
					if (price) {
						if (RegExp(/\./).exec(price)) {
							this.Unit_Price = price;
							return price;
						} else {
							this.Unit_Price = price;
							return price + ".00";
						}
					} else {
						return "";
					}
				};
			},
			Sales_Amount() {
				//总价
				return function() {
					return accMul(
						this.GoodsDetail.Paystages[this.isActive].Unit_Price,
						this.quantity
					);
				};
			},
		},
		methods: {
			toggleStyle(option) {
				this.isActive = option;
			},
			CheckImg(data, i) {
				uni.getImageInfo({
					src: app.globalData.Domain_IMG + data.Picture_Url,
					success: (res) => {
						// 图片加载成功
						// this.Goods.push(data)
						data.isShow = true;
						this.current ="1/" + this.GoodsDetail.Swiper.filter((item) => item.isShow).length; //初始化
					},
					fail: (error) => {
						data.isShow = false;
						// 图片加载失败
					},
				});
			},
			CheckImg1(data, i) {
				uni.getImageInfo({
					src: app.globalData.Domain_IMG + data.Picture_Url,
					success: (res) => {
						data.isShow = true;
					},
					fail: (error) => {
						data.isShow = false;
					},
				});
			},
			handleBtn(title) {
				//点击屏幕左侧悬浮按钮或底部"首页"、"客服"按钮后对应操作
				if (title == "top") {
					//回到页面顶部
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300,
					});
				} else if (title == "serve") {
					//进入"客服"页
					uni.navigateTo({
						url: "../serves/serves",
					});
				} else if (title == "car") {
					//进入"购物车"页
					uni.navigateTo({
						url: "../shopcar/shopcar",
					});
				} else if (title == "index") {
					//进入"首页"
					uni.navigateTo({
						url: "/pages/index/index",
					});
				}
			},
			fixed() {
				//底部模块高度获取
				uni.createSelectorQuery().select("#DetailMap").boundingClientRect((res) => {
					this.fixedHeight = res.height + this.rpxToPx(50);
				}).exec();
			},
			rpxToPx(rpx) {
				//rpx转px
				const screenWidth = uni.getSystemInfoSync().screenWidth;
				return (screenWidth * Number.parseInt(rpx)) / 750;
			},
			subGoods(i) {
				//商品减少
				if (this.quantity > this.Starting_Quantity) {
					this.quantity = this.quantity - Number(i);
					for (const key in this.GoodsDetail.Paystages) {
						if (this.quantity >= Number(key.slice(4))) {
							this.isActive1 = key;
						}
					}
				}
			},
			addGoods(i) {
				//商品增加
				this.quantity = this.quantity + Number(i);
				for (const key in this.GoodsDetail.Paystages) {
					if (this.quantity >= Number(key.slice(4))) {
						this.isActive1 = key;
					}
				}
			},
			handleBuy(title) {
				//点击"立即购买"或"加入购物车"
				this.showMask = !this.showMask;
				if (title == "car") {
					this.mask = "car";
				} else {
					this.mask = "buy";
				}
			},
			moveHandle() {}, //打开遮罩层底层滚动取消
			handleSkip() {
				//跳转"提交订单页"
				let obj = {
					goods: this.GoodsDetail.Goods,
					quantity: this.quantity,
					Paystages: this.GoodsDetail.Paystages,
				};
				uni.navigateTo({
					url: "/pages/Merchant/submitOrder?SalesOrder=" + encodeURIComponent(JSON.stringify(obj)),
				});
			},
			changeIndicatorDots(e) {
				//每次轮播修改轮播图数--1/4
				this.current =
					e.detail.current + 1 + "/" + this.GoodsDetail.Swiper.length;
			},
			carouselChart() {
				//轮播图属性函数
				this.$nextTick(() => {
					//渲染完成后再执行
					uni.createSelectorQuery().in(this).select("#swiper").boundingClientRect((data) => {
						this.swiperWidth = data.width;
					}).exec();
				});
			},
			onAddress() {
				//跳转到地址列表
				uni.navigateTo({
					url: "/pages/my/address?Path=/pages/index/details",
				});
			},
			selectspecifications(i) {
				this.select = i;
			},
			//控制商品说明
			showstory() {
				this.hide = !this.hide;
				this.shows = !this.shows;
			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #f8f9fa;
	}

	#shareBtn {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}

	.current {
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		bottom: 150rpx;
		right: 25rpx;
		justify-content: space-around;
	}

	.title {
		position: relative;
		margin-top: -50rpx;
		width: 90%;
		background-color: #fff;

		.txt {
			display: block;
			width: 90%;
		}

		.price {
			position: absolute;
			right: 30rpx;
			bottom: 30rpx;
		}
	}

	.button {
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
		width: 100rpx;
	}

	.front-cover {
		position: absolute;
		top: -50rpx;
		left: 40rpx;
		width: 170rpx;
		height: 170rpx;
	}

	.specifications {
		border: 1px solid #17a2b8;
		display: inline-block;
		background-color: #aaffff;
	}

	.specifications2 {
		color: #fff;
		display: inline-block;
		background-color: #aaaaaa;
	}

	.table {
		box-sizing: border-box;
		border-radius: 20rpx;
		background-color: #f8f9fa;
		padding: 20rpx;

		view {
			text-align: center;
			width: 100%;
		}

		.th {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 60rpx;
			line-height: 60rpx;
		}

		.td {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
		}
	}

	.small-radio {
		transform: scale(0.8);
	}

	.zq {
		display: flex;
		border-radius: 20rpx;
		box-sizing: border-box;
	}

	.active {
		background-color: #ece476;
		color: #000;
	}
</style>